// 此文件已废弃，合并到SlideShow里面
import React, { Component } from "react";

export default class Slide extends Component {
  actions = (duration, width) => {
    return {
      slidein: () => {
        return {
          transition: `all ${duration + 0.3}s ease`,
          transform: "translate3d(0px, 0px, 0px)"
        };
      },
      forwardout: () => {
        return {
          transition: `all ${duration}s ease`,
          transform: `translate3d(-${width}, 0px, 0px)`
        };
      },
      backout: () => {
        return {
          transition: `all ${duration}s ease`,
          transform: `translate3d(${width}, 0px, 0px)`
        };
      },
      goLeft: () => {
        return {
          transition: `none 0s ease`,
          transform: `translate3d(-${width}, 0px, 0px)`
        };
      },
      goRight: () => {
        return {
          transition: `none 0s ease`,
          transform: `translate3d(${width}, 0px, 0px)`
        };
      }
    };
  };

  render() {
    const { src, title, href, action, duration, width } = this.props;
    return (
      <div
        className="slide-item"
        style={this.actions(duration, width)[action]()}
      >
        <a href={href} target="_blank" rel="noreferrer">
          <img src={src} alt={title} />
          <p className="slide-title">{title}</p>
        </a>
      </div>
    );
  }
}
